// ┌────────────────────────────────────────────────────────────────────┐ \\
// │ F R E E B O A R D                                                  │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Copyright © 2013 Jim Heising (https://github.com/jheising)         │ \\
// │ Copyright © 2013 Bug Labs, Inc. (http://buglabs.net)               │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Licensed under the MIT license.                                    │ \\
// └────────────────────────────────────────────────────────────────────┘ \\

(function () {
    var SPARKLINE_HISTORY_LENGTH = 100;
    var SPARKLINE_COLORS = ["#FF9900", "#FFFFFF", "#B3B4B4", "#6B6B6B", "#28DE28", "#13F7F9", "#E6EE18", "#C41204", "#CA3CB8", "#0B1CFB"];

    function easeTransitionText(newValue, textElement, duration) {

        var currentValue = $(textElement).text();

        if (currentValue == newValue)
            return;

        if ($.isNumeric(newValue) && $.isNumeric(currentValue)) {
            var numParts = newValue.toString().split('.');
            var endingPrecision = 0;

            if (numParts.length > 1) {
                endingPrecision = numParts[1].length;
            }

            numParts = currentValue.toString().split('.');
            var startingPrecision = 0;

            if (numParts.length > 1) {
                startingPrecision = numParts[1].length;
            }

            jQuery({
                transitionValue: Number(currentValue),
                precisionValue: startingPrecision
            }).animate({transitionValue: Number(newValue), precisionValue: endingPrecision}, {
                duration: duration,
                step: function () {
                    $(textElement).text(this.transitionValue.toFixed(this.precisionValue));
                },
                done: function () {
                    $(textElement).text(newValue);
                }
            });
        }
        else {
            $(textElement).text(newValue);
        }
    }

    function addSparklineLegend(element, legend) {
        var legendElt = $("<div class='sparkline-legend'></div>");
        for (var i = 0; i < legend.length; i++) {
            var color = SPARKLINE_COLORS[i % SPARKLINE_COLORS.length];
            var label = legend[i];
            legendElt.append("<div class='sparkline-legend-value'><span style='color:" +
                color + "'>&#9679;</span>" + label + "</div>");
        }
        element.empty().append(legendElt);

        freeboard.addStyle('.sparkline-legend', "margin:5px;");
        freeboard.addStyle('.sparkline-legend-value',
            'color:white; font:10px arial,san serif; float:left; overflow:hidden; width:50%;');
        freeboard.addStyle('.sparkline-legend-value span',
            'font-weight:bold; padding-right:5px;');
    }

    function addValueToSparkline(element, value, legend) {
        var values = $(element).data().values;
        var valueMin = $(element).data().valueMin;
        var valueMax = $(element).data().valueMax;
        if (!values) {
            values = [];
            valueMin = undefined;
            valueMax = undefined;
        }

        var collateValues = function (val, plotIndex) {
            if (!values[plotIndex]) {
                values[plotIndex] = [];
            }
            if (values[plotIndex].length >= SPARKLINE_HISTORY_LENGTH) {
                values[plotIndex].shift();
            }
            values[plotIndex].push(Number(val));

            if (valueMin === undefined || val < valueMin) {
                valueMin = val;
            }
            if (valueMax === undefined || val > valueMax) {
                valueMax = val;
            }
        }

        if (_.isArray(value)) {
            _.each(value, collateValues);
        } else {
            collateValues(value, 0);
        }
        $(element).data().values = values;
        $(element).data().valueMin = valueMin;
        $(element).data().valueMax = valueMax;

        var tooltipHTML = '<span style="color: {{color}}">&#9679;</span> {{y}}';

        var composite = false;
        _.each(values, function (valueArray, valueIndex) {
            $(element).sparkline(valueArray, {
                type: "line",
                composite: composite,
                height: "100%",
                width: "100%",
                fillColor: false,
                lineColor: SPARKLINE_COLORS[valueIndex % SPARKLINE_COLORS.length],
                lineWidth: 2,
                spotRadius: 3,
                spotColor: false,
                minSpotColor: "#78AB49",
                maxSpotColor: "#78AB49",
                highlightSpotColor: "#9D3926",
                highlightLineColor: "#9D3926",
                chartRangeMin: valueMin,
                chartRangeMax: valueMax,
                tooltipFormat: (legend && legend[valueIndex]) ? tooltipHTML + ' (' + legend[valueIndex] + ')' : tooltipHTML
            });
            composite = true;
        });
    }


    var gaugeID = 0;

//  自定义3D
    var hCharts3dpieWidget = function (settings) {
        var thisGaugeID_1 = "gauge-" + gaugeID++;
        var thisGaugeID_2 = "gauge-" + gaugeID++;
        var thisGaugeID_3 = "gauge-" + gaugeID++;
        var thisGaugeID_4 = "gauge-" + gaugeID++;
        var htmlElement_1 = $('<div class="custom-widget bling2" style="width: 25%;display: inline-block">' + '<div class="custom-wrapper" id="' + thisGaugeID_1 + '" style="height:240px;"></div>' + '</div>');
        var htmlElement_2 = $('<div class="custom-widget bling2" style="width: 25%;display: inline-block">' + '<div class="custom-wrapper" id="' + thisGaugeID_2 + '" style="height:240px;"></div>' + '</div>');
        var htmlElement_3 = $('<div class="custom-widget bling2" style="width: 25%;display: inline-block">' + '<div class="custom-wrapper" id="' + thisGaugeID_3 + '" style="height:240px;"></div>' + '</div>');
        var htmlElement_4 = $('<div class="custom-widget bling2" style="width: 25%;display: inline-block">' + '<div class="custom-wrapper" id="' + thisGaugeID_4 + '" style="height:240px;"></div>' + '</div>');
        var currentSettings = settings;
        var option_1 = {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 60
                },
                backgroundColor: 'rgba(0,0,0,0)'
            },
            plotOptions: {
                pie: {
                    depth: 45,
                    size: '140%',
                    center: ['50%', 10],
                    dataLabels: {
                        style: {
                            color: '#23a0ff',
                            fontSize: '14px',
                            fontWeight: 'normal',
                            textOutline: 'none',
                            textAlign: 'center'
                        },
                        formatter: function () {
                            var text = this.point.name + this.point.y;
                            if (text.length <= 4) {
                                return text;
                            } else if (text.length > 4 && text.length <= 16) {
                                return text = text.slice(0, 4) + '<br/>' + text.slice(4)
                            }
                        },
                    },
                }
            },
            title: {
                text: null,
                y: 40,
                style: {
                    color: '#ffae55',
                    fontSize: '26px'
                }
            },
            subtitle: {
                text: '总容量',
                y: 210,
                style: {
                    color: '#fff',
                    fontSize: '16px'
                }
            },
            credits: false,
            series: []
        };
        var option_2 = {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 60
                },
                backgroundColor: 'rgba(0,0,0,0)'
            },
            plotOptions: {
                pie: {
                    depth: 45,
                    size: '140%',
                    center: ['50%', 10],
                    dataLabels: {
                        style: {
                            color: '#23a0ff',
                            fontSize: '14px',
                            fontWeight: 'normal',
                            textOutline: 'none',
                            textAlign: 'center'
                        },
                        formatter: function () {
                            var text = this.point.name + this.point.y;
                            if (text.length <= 4) {
                                return text;
                            } else if (text.length > 4 && text.length <= 16) {
                                return text = text.slice(0, 4) + '<br/>' + text.slice(4)
                            }
                        },
                    },
                }
            },
            title: {
                text: null,
                y: 40,
                style: {
                    color: '#ffae55',
                    fontSize: '26px'
                }
            },
            subtitle: {
                text: '总容量',
                y: 210,
                style: {
                    color: '#fff',
                    fontSize: '16px'
                }
            },
            credits: false,
            series: []
        };
        var option_3 = {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 60
                },
                backgroundColor: 'rgba(0,0,0,0)'
            },
            plotOptions: {
                pie: {
                    depth: 45,
                    size: '140%',
                    center: ['50%', 10],
                    dataLabels: {
                        style: {
                            color: '#23a0ff',
                            fontSize: '14px',
                            fontWeight: 'normal',
                            textOutline: 'none',
                            textAlign: 'center'
                        },
                        formatter: function () {
                            var text = this.point.name + this.point.y;
                            if (text.length <= 4) {
                                return text;
                            } else if (text.length > 4 && text.length <= 16) {
                                return text = text.slice(0, 4) + '<br/>' + text.slice(4)
                            }
                        },
                    },
                }
            },
            title: {
                text: null,
                y: 40,
                style: {
                    color: '#ffae55',
                    fontSize: '26px'
                }
            },
            subtitle: {
                text: '总容量',
                y: 210,
                style: {
                    color: '#fff',
                    fontSize: '16px'
                }
            },
            credits: false,
            series: []
        };
        var option_4 = {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 60
                },
                backgroundColor: 'rgba(0,0,0,0)'
            },
            plotOptions: {
                pie: {
                    depth: 45,
                    size: '140%',
                    center: ['50%', 10],
                    dataLabels: {
                        style: {
                            color: '#23a0ff',
                            fontSize: '14px',
                            fontWeight: 'normal',
                            textOutline: 'none',
                            textAlign: 'center'
                        },
                        formatter: function () {
                            var text = this.point.name + this.point.y;
                            if (text.length <= 4) {
                                return text;
                            } else if (text.length > 4 && text.length <= 16) {
                                return text = text.slice(0, 4) + '<br/>' + text.slice(4)
                            }
                        },
                    },
                }
            },
            title: {
                text: null,
                y: 40,
                style: {
                    color: '#ffae55',
                    fontSize: '26px'
                }
            },
            subtitle: {
                text: '总容量',
                y: 210,
                style: {
                    color: '#fff',
                    fontSize: '16px'
                }
            },
            credits: false,
            series: []
        };

        var creatElement = function () {
            Highcharts.setOptions({
                colors: ['#f9d952', '#4cadff']
            });
            setTimeout(function () {
                var dom_1 = document.getElementById(thisGaugeID_1);
                var dom_2 = document.getElementById(thisGaugeID_2);
                var dom_3 = document.getElementById(thisGaugeID_3);
                var dom_4 = document.getElementById(thisGaugeID_4);
                var myChart_1 = Highcharts.chart(dom_1, option_1);
                var myChart_2 = Highcharts.chart(dom_2, option_2);
                var myChart_3 = Highcharts.chart(dom_3, option_3);
                var myChart_4 = Highcharts.chart(dom_4, option_4);
            }, 1000);
        }
        this.render = function (element) {
            $(element).append(htmlElement_1)
                .append(htmlElement_2)
                .append(htmlElement_3)
                .append(htmlElement_4);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            option_1.title.text = value.title_1;
            option_2.title.text = value.title_2;
            option_3.title.text = value.title_3;
            option_4.title.text = value.title_4;
            option_1.subtitle.text = '总容量' + value.subtitle_1 + '(TB)';
            option_2.subtitle.text = '总容量' + value.subtitle_2 + '(TB)';
            option_3.subtitle.text = '总容量' + value.subtitle_3 + '(TB)';
            option_4.subtitle.text = '总容量' + value.subtitle_4 + '(PB)';
            if(value.subtitle_1 == 0) {
                value.data_1[0][1] = 1;
                value.data_1[1]=[];
                option_1.plotOptions.pie.dataLabels.enabled = false
            }else {
                value.data_1[0][1] *= 1;
                value.data_1[1][1] *= 1;
            }
            if(value.subtitle_2 == 0) {
                value.data_2[0][1] = 1;
                value.data_2[1]=[];
                option_2.plotOptions.pie.dataLabels.enabled = false
            }else {
                value.data_2[0][1] *= 1;
                value.data_2[1][1] *= 1;
            }
            if(value.subtitle_3 == 0) {
                value.data_3[0][1] = 1;
                value.data_3[1]=[];
                option_3.plotOptions.pie.dataLabels.enabled = false
            }else {
                value.data_3[0][1] *= 1;
                value.data_3[1][1] *= 1;
            }
            if(value.subtitle_4 == 0) {
                value.data_4[0][1] = 1;
                value.data_4[1]=[];
                option_4.plotOptions.pie.dataLabels.enabled = false
            }else {
                value.data_4[0][1] *= 1;
                value.data_4[1][1] *= 1;
            }

            value.data_1[0][1] *= 1;
            value.data_1[1][1] *= 1;
            value.data_2[0][1] *= 1;
            value.data_2[1][1] *= 1;
            value.data_3[0][1] *= 1;
            value.data_3[1][1] *= 1;
            value.data_4[0][1] *= 1;
            value.data_4[1][1] *= 1;
            option_1.series.push({
                data: value.data_1
            })
            option_2.series.push({
                data: value.data_2
            })
            option_3.series.push({
                data: value.data_3
            })
            option_4.series.push({
                data: value.data_4
            })
        }

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        }

        this.getHeight = function () {
            return Number(4)
        }

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "h_charts_pie",
        "display_name": "3D饼图",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new hCharts3dpieWidget(settings));
        }
    });


    //  自定义网络告警
    var eChartsInternetWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var textElement = $('<div class="custom-widget" style="width: 40%;display: inline-block;vertical-align: middle"></div>');
        var htmlElement = $('<div class="custom-widget" style="width: 60%;display: inline-block;vertical-align: middle">' + '<div class="custom-wrapper" id="' + thisGaugeID + '" style="height:300px;"></div>' + '</div>');
        var currentSettings = settings;
        var total;
        var outFlow;
        var inFlow;
        var top;
        var equip;
        var last;
        var option = {
            series: [
                {
                    type: 'pie',
                    radius: ['30%', '50%'],
                    avoidLabelOverlap: true,
                    label: {
                        color: '#00e8f2'
                    },
                    center: ['50%', '40%'],
                    data: [{
                        value: '', name: '报警设备',
                        label: {
                            show: true
                        },
                        labelLine: {
                            show: true
                        }
                    },
                        {
                            value: '', name: '正常设备'
                        }]
                }
            ]
        };

        var creatElement = function () {
            var p = "";
            p += "<p>" + "网络总数：" + total + "个" + "</p>" +
                "<p>" + "实时网络出流量：" + outFlow + "MB" + "</p>" +
                "<p>" + "实时网络入流量：" + inFlow + "MB" + "</p>" +
                "<p>" + "带宽最高链路：" + top + "</p>" +
                "<p>" + "最短运行网络设备：" + "</p>" +
                "<p>" + equip + "</p>" +
                "<p>" + "最后告警设备：" + last + "</p>";
            textElement.html(p);
            textElement.children('p').css({
                fontSize: '12px',
                lineHeight: '20px',
                width: '200px',
                margin: 0,
                marginLeft: '40px',
                color: '#00e8f2',
                wordWrap: 'break-word',
                wordBreak: 'break-all',
                whiteSpace: 'normal'
            });
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };
        this.render = function (element) {
            $(element)
                .append(textElement)
                .append(htmlElement);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            total = value.networkDeviceCount;
            outFlow = value.totalOutFlows;
            inFlow = value.totalInFlows;
            top = value.maxFlowLine;
            equip = value.shortestUptimeNetworkDevice;
            last = value.nearestAlarmNetworkDevice;
            var num = value.networkDeviceAlarmPercent;
            option.title = {
                text: "报警率" + num + "%",
                x: 'center',
                y: '75%',
                textStyle: {
                    color: '#00b0c7',
                    fontSize: 20
                }
            };
            option.series[0].data = value.data;
            if (value.data[0].value == 0) {
                option.series[0].data[0].label = {show: false}
                option.series[0].data[0].labelLine = {show: false}
            }

            option.series[0].data[0].itemStyle = {
                normal: {
                    color: '#ffc857',
                }
            };
            option.series[0].data[1].itemStyle = {
                normal: {//颜色渐变
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#7260d6' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#42f3fc' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            };
            creatElement()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        };

        this.getHeight = function () {
            return Number(5)
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "Internet",
        "display_name": "网络告警",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsInternetWidget(settings));
        }
    });


    //  自定义网络流量总合
    var eChartsFlowWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget bling2" style="width: 100%;display: inline-block;vertical-align: middle">' + '<div class="custom-wrapper" id="' + thisGaugeID + '" style="height:300px;"></div>' + '</div>');
        var currentSettings = settings;
        var option = {
            xAxis: {
                type: 'value',
                axisLabel: {
                    color: "#6e69b2",
                    formatter: '{value} GB'
                },
                splitNumber: 3,
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(101,124,168,0.3)'
                    }
                },
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    color: "#6e69b2"
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(101,124,168,0.3)'
                    }
                },
                data: []
            },
            grid: {
                left: 100,
                top: 20,
                bottom: 100
            },
            title: {
                text: "网络流量总合",
                x: 'center',
                textStyle: {
                    color: '#00b0c7',
                    fontSize: '20'
                },
                bottom: 40
            },
            series: [{
                name: 'bar',
                type: 'bar',
                // itemStyle: function () {
                //     return {
                //         color: '#ffffff'
                //     }
                // },
                barWidth: 5,
                itemStyle: {
                    color: function (params) {
                        var colorList = [
                            ['#278d65', '#62c467'],
                            ['#2a54b4', '#00ccff'],
                            ['#754abf', '#f75271'],
                        ];
                        var index = params.dataIndex;
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                            [
                                {offset: 0, color: colorList[index][0]},
                                {offset: 1, color: colorList[index][1]}
                            ]
                        );
                    },
                    barBorderRadius: 5,
                },
                label: {
                    show: true,
                    position: "right",
                    textStyle: {
                        color: "#fff"
                    }
                },
                data: [],
                animationDelay: function (idx) {
                    return idx * 10;
                }
            }]
        };

        var creatElement = function () {
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };
        this.render = function (element) {
            $(element)
                .append(htmlElement);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            option.series[0].data = value.data;
            option.yAxis.data = value.yData;
            creatElement()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        };

        this.getHeight = function () {
            return Number(5)
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "flow",
        "display_name": "网络流量",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsFlowWidget(settings));
        }
    });

    //  服务器管理
    var eChartsServerWidget = function (settings) {
        var thisGaugeID_1 = "gauge-" + gaugeID++;
        var thisGaugeID_2 = "gauge-" + gaugeID++;
        var thisGaugeID_3 = "gauge-" + gaugeID++;
        var htmlElement_1 = $('<div class="custom-widget bling2" style="width: 50%;display: inline-block;vertical-align: middle">' + '<div class="custom-wrapper" id="' + thisGaugeID_1 + '" style="height:150px;"></div>' + '<div class="custom-wrapper" id="' + thisGaugeID_3 + '" style="height:100px;"></div>' + '</div>');
        var htmlElement_2 = $('<div class="custom-widget bling2" style="width: 50%;display: inline-block;vertical-align: middle">' + '<div class="custom-wrapper" id="' + thisGaugeID_2 + '" style="height:300px;"></div>' + '</div>');
        var lengend = $('<div></div>');
        var labelBox = $('<div></div>');
        var name_1;
        var day_1;
        var hour_1;
        var minute_1;
        var name_2;
        var day_2;
        var hour_2;
        var minute_2;
        var currentSettings = settings;
        var p = '';
        var labelData_1 = '';
        var labelData_2 = '';
        var labelData_3 = '';
        var option_1 = {
            title: {
                x: 55,
                text: '',
                subtext: '',
                textStyle: {
                    color: '#00e8f2',
                    fontSize: 16
                },
                subtextStyle: {
                    color: '#00e8f2',
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    color: "#00e8f2",
                    formatter: '{value} 小时'
                },
                splitNumber: 3,
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(101,124,168,0.3)'
                    }
                },
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    color: "#00e8f2",
                    formatter: function (value) {
                        var text = value
                        if (text.length <= 6) {
                            return text;
                        } else if (text.length > 6 && text.length <= 12) {
                            return text = text.slice(0, 6) + '\n' + text.slice(6)
                        } else if (text.length > 12 && text.length <= 18) {
                            return text = text.slice(0, 6) + '\n' + text.slice(6, 18) + '\n' + text.slice(18)
                        } else if (text.length > 18 && text.length <= 24) {
                            return text = text.slice(0, 6) + '\n' + text.slice(6, 12) + '\n' + text.slice(12, 18) + '\n' + text.slice(18)
                        }
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(101,124,168,0.3)'
                    }
                },
                data: []
            },
            grid: {
                top: 60,
                left: 120,
                bottom: 30,
                right: 30
            },
            series: [
                {
                    name: 'bar',
                    type: 'bar',
                    barWidth: 25,
                    itemStyle: {
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#c88aff'},
                                    {offset: 1, color: '#8f52f2'}
                                ]
                            );
                        },
                        barBorderRadius: 3,
                    },
                    label: {
                        show: false,
                    },
                    data: [],
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                }
            ]
        };
        var option_2 = {
            title: {
                text: '',
                bottom: 30,
                textStyle: {
                    color: '#00e8f2'
                },
                x: 'center'
            },

            series: [
                {
                    type: 'pie',
                    avoidLabelOverlap: true,
                    label: {
                        show: false,
                        color: '#00e8f2'
                    },
                    radius: ['29%', '39%'],
                    zlevel: 15,
                    center: ['50%', '40%'],
                    data: [
                        {
                            itemStyle: {
                                color: '#3399cc'
                            }
                        },
                        {
                            itemStyle: {
                                color: 'rgba(0,0,0,0)'
                            }
                        }
                    ]
                },
                {
                    type: 'pie',
                    avoidLabelOverlap: true,
                    center: ['50%', '40%'],
                    label: {
                        show: false
                    },
                    radius: ['16%', '26%'],
                    zlevel: 10,
                    data: [
                        {
                            itemStyle: {
                                color: '#177bc6'
                            }
                        },
                        {
                            itemStyle: {
                                color: 'rgba(0,0,0,0)'
                            }
                        }
                    ]
                },
                {
                    type: 'pie',
                    avoidLabelOverlap: true,
                    center: ['50%', '40%'],
                    label: {
                        show: false,
                        color: '#00e8f2'
                    },
                    labelLine: {
                        length: 20,
                        show: false,
                        length2: 20
                    },
                    radius: ['42%', '52%'],
                    zlevel: 5,
                    data: [
                        {
                            itemStyle: {
                                color: '#0a5da6'
                            }
                        },
                        {
                            itemStyle: {
                                color: 'rgba(0,0,0,0)'
                            }
                        }
                    ]
                },
                {
                    type: 'pie',
                    radius: ['55%', '65%'],
                    hoverAnimation: false,
                    center: ['50%', '40%'],
                    zlevel: 0,
                    itemStyle: {
                        color: '#023e73'
                    },
                    label: {
                        normal: {
                            show: false,
                        }
                    },
                    data: [
                        {value: 100},
                    ]
                }
            ]
        };
        var option_3 = {
            xAxis: {
                type: 'value',
                axisLabel: {
                    color: "#59d4fc",
                    formatter: ''
                },
                splitNumber: 3,
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(101,124,168,0.3)'
                    }
                },
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    color: "#59d4fc",
                    formatter: function (value) {
                        var text = value
                        if (text.length <= 6) {
                            return text;
                        } else if (text.length > 6 && text.length <= 12) {
                            return text = text.slice(0, 6) + '\n' + text.slice(6)
                        } else if (text.length > 12 && text.length <= 18) {
                            return text = text.slice(0, 6) + '\n' + text.slice(6, 18) + '\n' + text.slice(18)
                        } else if (text.length > 18 && text.length <= 24) {
                            return text = text.slice(0, 6) + '\n' + text.slice(6, 12) + '\n' + text.slice(12, 18) + '\n' + text.slice(18)
                        }
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(101,124,168,0.3)'
                    }
                },
                data: []
            },
            grid: {
                left: 120,
                right: 30,
                top: 20,
                bottom: 30
            },
            series: [
                {
                    name: 'bar',
                    type: 'bar',
                    barWidth: 25,
                    itemStyle: {
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#7ea7ef'},
                                    {offset: 1, color: '#5e88f5'}
                                ]
                            );
                        },
                        barBorderRadius: 3,
                    },
                    label: {
                        show: false,
                    },
                    data: [],
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                }
            ]
        };

        var creatElement = function () {
            var label_1 = '<div style="position: absolute;left: 886px;top: 24px"><div style="display: inline-block;width: 120px;height: 3px;background-color:#00b0c7; vertical-align: middle"></div><p style="font-size: 16px;color: #00e8f2; display: inline-block;vertical-align: middle">' + '虚拟服务器' + labelData_2 + '个' + '</p></div>';
            var label_2 = '<div style="position: absolute; right: 290px; top: 42px"><p style="font-size: 16px;color: #00e8f2; display: inline-block;vertical-align: middle">' + '物理服务器' + labelData_1 + '个' + '</p><div style="display: inline-block;width: 120px;height: 3px;background-color:#00b0c7; vertical-align: middle"></div></div>';
            var label_3 = '<div style="position: absolute;left: 886px;top: 60px"><div style="display: inline-block;width: 120px;height: 3px;background-color:#00b0c7; vertical-align: middle"></div><p style="font-size: 16px;color: #00e8f2; display: inline-block;vertical-align: middle">' + '告警服务器' + labelData_3 + '%' + '</p></div>';

            p = '<div>' +
                '<div style="width:12px; height: 12px; border-radius: 50%; background-color: #9e60f5;display: inline-block; vertical-align: middle;margin-left: 78px"></div>' +
                '<p style="display: inline-block; vertical-align: middle; color: #00e8f2;font-size: 16px;margin: 0; margin-left: 12px">' + name_2 + '，共运行' + day_2 + '天' + hour_2 + '小时' + minute_2 + '分钟' + '</p>' +
                '</div>' +
                '<div>' +
                '<div style="width:12px; height: 12px; border-radius: 50%; background-color: #658ff4;display: inline-block; vertical-align: middle;margin-left: 78px"></div>' +
                '<p style="display: inline-block; vertical-align: middle; color: #00e8f2;font-size: 16px;margin: 0; margin-left: 12px">' + name_1 + '，共运行' + day_1 + '天' + hour_1 + '小时' + minute_1 + '分钟' + '</p>' +
                '</div>';
            setTimeout(function () {
                lengend.html(p);
                labelBox.html(label_1 + label_2 + label_3);
                var dom_1 = document.getElementById(thisGaugeID_1);
                var dom_2 = document.getElementById(thisGaugeID_2);
                var dom_3 = document.getElementById(thisGaugeID_3);
                var myChart_1 = echarts.init(dom_1);
                var myChart_2 = echarts.init(dom_2);
                var myChart_3 = echarts.init(dom_3);
                myChart_1.setOption(option_1, true);
                myChart_2.setOption(option_2, true);
                myChart_3.setOption(option_3, true);
            }, 1000);
        };
        this.render = function (element) {
            htmlElement_1.append(lengend);
            htmlElement_2.append(labelBox);
            $(element)
                .append(htmlElement_1)
                .append(htmlElement_2);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var barValue = newValue.bar;
            name_1 = barValue.name_1;
            day_1 = barValue.day_1;
            hour_1 = barValue.hour_1;
            minute_1 = barValue.minute_1;
            name_2 = barValue.name_2;
            day_2 = barValue.day_2;
            hour_2 = barValue.hour_2;
            minute_2 = barValue.minute_2;
            option_1.title.text = '正常运行最短时长主机：' + name_2;
            option_1.title.subtext = '正常运行最长时长主机：' + name_1;
            option_1.yAxis.data[0] = barValue.yData[1];
            option_1.series[0].data[0] = barValue.data[1];
            option_1.xAxis.axisLabel.formatter = '{value}' + barValue.y_name2;
            option_3.yAxis.data[0] = barValue.yData[0];
            option_3.series[0].data[0] = barValue.data[0];
            option_3.xAxis.axisLabel.formatter = '{value}' + barValue.y_name1;

            var pieValue = newValue.pie;
            labelData_1 = pieValue[0];
            labelData_2 = pieValue[2];
            labelData_3 = pieValue[3];
            option_2.series[1].data[0].name = '告警服务器' + pieValue[1] + '个';
            option_2.series[0].data[0].value = pieValue[0];
            option_2.series[0].data[1].value = pieValue[2];
            option_2.series[1].data[0].value = pieValue[3];
            option_2.series[1].data[1].value = 100 - pieValue[3];
            option_2.series[2].data[0].value = pieValue[2];
            option_2.series[2].data[1].value = pieValue[0];
            creatElement()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        };

        this.getHeight = function () {
            return Number(5)
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "server",
        "display_name": "服务器管理",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsServerWidget(settings));
        }
    });

    //  应用管理
    var eChartsMAMWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var textElement = $('<div class="custom-widget" style="width: 40%;display: inline-block;vertical-align: middle"></div>');
        var htmlElement = $('<div class="custom-widget bling2" style="width: 60%;display: inline-block;vertical-align: middle">' + '<div class="custom-wrapper" id="' + thisGaugeID + '" style="height:240px;"></div>' + '</div>');
        var currentSettings = settings;
        var day;
        var hour;
        var minute;
        var percent;
        var option = {
            series: [
                {
                    type: 'pie',
                    radius: ['35%', '55%'],
                    avoidLabelOverlap: true,
                    label: {
                        align: 'left',
                        normal: {
                            formatter: function (v) {
                                var text = v.name + v.value + '个';
                                if (text.length <= 6) {
                                    return text;
                                } else if (text.length > 6 && text.length <= 16) {
                                    return text = text.slice(0, 6) + '\n' + text.slice(6);
                                } else if (text.length > 16 && text.length <= 24) {
                                    return text = text.slice(0, 6) + '\n' + text.slice(6, 16) + '\n' + text.slice(16);
                                } else if (text.length > 24 && text.length <= 30) {
                                    return text = text.slice(0, 8) + '\n' + text.slice(8, 16) + '\n' + text.slice(16, 24) + '\n' + text.slice(24);
                                } else if (text.length > 30) {
                                    return text = text.slice(0, 8) + '\n' + text.slice(8, 16) + '\n' + text.slice(16, 24) + '\n' + text.slice(24, 30) + '\n' + text.slice(30);
                                }
                            },
                            textStyle: {
                                fontSize: 12,
                                color: '#00e8f2',
                                lineHeight: 16
                            }
                        }
                    },
                    center: ['50%', '43%'],
                    data: [
                        {
                            value: '', name: '当前应用系统故障数',
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            },
                            emphasis: {
                                label: {
                                    show: true
                                },
                                labelLine: {
                                    show: true
                                },
                            }
                        },
                        {
                            value: '', name: '当前应用系统正常数',
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            },
                            emphasis: {
                                label: {
                                    show: true
                                },
                                labelLine: {
                                    show: true
                                },
                            }
                        }
                    ]
                }
            ]
        };

        var creatElement = function () {
            var p = "";
            p += "<p>故障持续时间:</p>" +
                "<p>" + day + "天" + hour + "小时" + minute + "分" + "</p>";
            textElement.html(p);
            textElement.children('p').css({
                fontSize: '16px',
                lineHeight: '24px',
                margin: 0,
                marginLeft: 90,
                color: '#00e8f2',
            });
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };
        this.render = function (element) {
            $(element)
                .append(textElement)
                .append(htmlElement);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            percent = value.percent;
            day = value.day;
            hour = value.hour;
            minute = value.minute;
            option.title = {
                text: percent,
                subtext: "应用告警率",
                itemGap: 90,
                x: 'center',
                y: '37%',
                textStyle: {
                    color: '#00e8f2',
                    fontSize: 20
                },
                subtextStyle: {
                    color: '#00b0c7',
                    fontSize: 20,
                    fontWeight: 'bold'
                }
            };
            for (var i = 0; i < value.data.length; i++) {
                if (value.data[i].value == '-') {
                    option.series[0].data[0].label = {show: false}
                    option.series[0].data[0].labelLine = {show: false}
                    option.series[0].data[1].label = {show: false}
                    option.series[0].data[1].labelLine = {show: false}
                    option.series[0].data[0].emphasis = {label: {show: false}, labelLine: {show: false}}
                    option.series[0].data[1].emphasis = {label: {show: false}, labelLine: {show: false}}
                }
                if (value.data[i].value == 0) {
                    option.series[0].data[i].label = {show: false}
                    option.series[0].data[i].labelLine = {show: false}
                }

            }
            option.series[0].data[0].value = value.data[0].value;
            option.series[0].data[1].value = value.data[1].value;
            option.series[0].data[1].itemStyle = {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#1f7dea' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#62a5f4' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            };
            option.series[0].data[0].itemStyle = {
                normal: {
                    color: '#ffc857'
                }
            };
            creatElement()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        };

        this.getHeight = function () {
            return Number(4)
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "MAM",
        "display_name": "应用管理",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsMAMWidget(settings));
        }
    });

    // 运维管理
    var eChartsOPEXWidget = function (settings) {
        var tableTag = $('<div id="table_1"></div>');
        var currentSettings = settings;
        var tableData;
        var tableTh = $('<div></div>');
        var tableTb = $('<div id="box"></div>');
        var tableTf = $('<div></div>');
        var week = '';
        var month = '';
        var tdData = null;
        var thData = null;
        var tfData = null;
        var creatTable = function () {
            var num = tableData.length;
            var tNum = tableData[0].length;
            tdData = ""
            thData = "<span class='th'>申请审批服务目录</span>" +
                "<span class='th'>本周</span>" +
                "<span class='th'>本月</span>";
            for (var i = 0; i <= num - 1; i++) {
                tdData += "<div class='td-color'>";
                for (var j = 0; j <= tNum - 1; j++) {
                    tdData += "<span class='td'>" + tableData[i][j] + "</span>";
                }
                tdData += "</div>"
            }
            for (var i = 0; i <= num - 1; i++) {
                tdData += "<div class='td-color'>";
                for (var j = 0; j <= tNum - 1; j++) {
                    tdData += "<span class='td'>" + tableData[i][j] + "</span>";
                }
                tdData += "</div>"
            }
            tfData = "<span class='th week'>本周完结总数 " + week + "</span>" +
                "<span class='th month'>本月完结总数 " + month + "</span>";


        };
        var move = function () {
            var marginTop = 0;
            setInterval(function () {
                $('#box').children('.td-color').first().animate({"margin-top": marginTop--}, 0, function () {
                    if (!$(this).is(':animated')) {
                        if (-marginTop > $(this).height()) {
                            $(this).css("margin-top", "0px").appendTo($("#box"));
                            marginTop = 0;
                        }
                    }
                })
            }, 40)
        };
        this.render = function (element) {
            $(element).empty();
            setTimeout(function () {
                tableTh.html(thData);
                tableTb.html(tdData);
                tableTf.html(tfData);
                $(tableTag)
                    .append(tableTh)
                    .append(tableTb)
                    .append(tableTf);
                $(tableTag).css(
                    {
                        width: '100%',
                        textAlign: 'center',
                        fontSize: '20px'
                    }
                );
                $(element).append(tableTag);
                move()
            }, 1000);
        };
        this.onCalculatedValueChanged = function (settingName, newValue) {
            tableData = newValue.table;
            week = newValue.week;
            month = newValue.month;
            creatTable();
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        };
        this.getHeight = function () {
            return Number(4);
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "e_charts_OPEX",
        display_name: "运维管理",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsOPEXWidget(settings));
        }
    });

}());
